import React from "react";
import { SearchPanel } from "./search-panel";
import { List } from "./list";
import { useDebounce, useDocumentTitle } from "../../utils";
import { useProjects } from "../../utils/project";
import { useUsers } from "../../utils/user";
import { useProjectModal, useProjectSearchParams } from "./util";
import {
  ButtonNoPadding,
  ErrorBox,
  Row,
  ScreenContainer,
} from "components/lib";

// import { Helmet, HelmetProvider } from "react-helmet-async";
// import { TestClosure } from "../../components/test-closure";
//基本类型，可以放到依赖里；组件状态，可以放到依赖里；非组件状态的对象，绝不可以放到依赖里
//https://codesandbox.io/s/keen-wave-tlz9s?file=/src/App.js
export const ProjectListScreen = () => {
  useDocumentTitle("项目列表", false);
  const { open } = useProjectModal();
  const [param, setParam] = useProjectSearchParams();
  const { isLoading, error, data: list } = useProjects(useDebounce(param, 200));
  const { data: users } = useUsers();

  return (
    <ScreenContainer>
      {/*<TestClosure />*/}
      {/*<HelmetProvider>*/}
      {/*  <Helmet>*/}
      {/*    <title>项目列表</title>*/}
      {/*  </Helmet>*/}
      {/*</HelmetProvider>*/}
      <Row between={true}>
        <h1>项目列表</h1>
        <ButtonNoPadding type={"link"} onClick={open}>
          创建项目
        </ButtonNoPadding>
      </Row>

      {/*<Button onClick={retry}>retry</Button>*/}
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      <ErrorBox error={error} />
      <List loading={isLoading} users={users || []} dataSource={list || []} />
    </ScreenContainer>
  );
};
ProjectListScreen.whyDidYouRender = false;
